<template>
	<view>
		<text :class="[weatherClass]" style="font-size: 40rpx;"></text>
	</view>
</template>

<script setup lang="ts">
	// 接收传递的天气类型
	const props = defineProps({
		weatherName: {
			type: String,
			required: true
		}
	})
	const weatherIcons = {
		'晴': 'icon-qing',       // 晴天
		'多云': 'icon-yin',    // 多云
		'阴': 'icon-yin',   // 阴天
		'雨': 'icon-rain',       // 普通降雨
		'小雨': 'icon-xiaoyu',// 细分降雨类型
		'中雨': 'icon-zhongyu',
		'大雨': 'icon-dayu',
		'雪': 'icon-xiaoxue',       // 降雪
		'雾': 'icon-wu',        // 雾霾
		'雷阵雨': 'icon-leizhenyu',// 雷雨
		'default': 'icon-weather'// 默认图标
	};
	// 匹配映射关系获取类名
	const weatherClass = 'iconfont ' + weatherIcons[props.weatherName];
</script>

<style scoped lang="scss">
</style>